<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <title>Audio Network - data transmission over sound waves - physical layer example</title>

    <meta name="description" content="All features demo - here you can configure, check and debug all aspects of data transmission over sound.">

    <link rel="stylesheet" type="text/css" href="../../asset/css/simple-bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../../asset/css/example.css">
    <link rel="stylesheet" type="text/css" href="physical-layer-full.css">
    <script src="../../asset/js/site.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body onLoad="onLoad()">
    <div id="fb-root"></div>
    <script>
        if (isProduction()) { // TODO refactor this
            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.7&appId=726972757440597";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
        }
    </script>

    <div class="wrapper">

        <div class="container">

            <h1>Audio Network - send data over sound in JavaScript</h1>
            <div class="clearfix margin-bottom">
                <div class="row margin-bottom">
                    <div class="col col-sx-12">
                        <div class="fb-like-cont">
                            <a href="https://www.facebook.com/Data-transmission-over-sound-500422050157351/" target="_blank" class="a-icon a-icon-fb">
                                <img src="/asset/image/fb.png" alt="Audio Network at Facebook">
                            </a>
                            <div class="fb-like" data-href="https://www.facebook.com/Data-transmission-over-sound-500422050157351/" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
                        </div>
                        <p class="text-right">
                            Return to <a href="https://audio-network.rypula.pl">main page</a>
                        </p>
                        <p class="larger text-center margin-bottom-triple">
                            THIS PROJECT IS STILL UNDER DEVELOPMENT<br/>
                            Source code available at <a href="https://github.com/robertrypula/AudioNetwork" target="_blank">GitHub</a>
                        </p>
                        <p class="larger text-center margin-bottom-triple" style="outline: 1px dashed red;">
                            Old PSK approach. It will be deprecated soon!
                        </p>
                        <p>
                            If you don't want to dig into Audio Network internals you can use following 'Quick Config'
                            buttons to setup some common configurations:

                            <br/><br/>

                            Default settings used when this page loads. The most reliable PSK transmission scheme - Binary Phase Shift Keying:<br/>
                            <button
                                class="btn btn-default"
                                onClick="quickConfigure(1, 2, 4, 1)"
                                >
                                PSK-2 (BPSK), Baud-4 - 4 bits/s
                            </button>
                            <br/>
                            Two times faster baud rate (8) and two times more PSK symbols (PSK-4, Quadrature Phase Shift Keying):<br/>
                            <button
                                class="btn btn-default"
                                onClick="quickConfigure(1, 4, 8, 1)"
                                >
                                PSK-4 (QPSK), Baud-8 - 16 bits/s
                            </button>
                            <br/>
                            10 symbols PSK scheme and baud 4 - you can send for example phone numbers by directly using PSK symbols:<br/>
                            <button
                                class="btn btn-default"
                                onClick="quickConfigure(1, 10, 4, 1)"
                                >
                                PSK-10, Baud-4 - 4 decimalDigits/s
                            </button>
                            <br/><br/>
                            Experiments with higher speeds (under testing - it may blow the app):<br/>
                            <button
                                    class="btn btn-default"
                                    onClick="quickConfigure(1, 8, 16, 1)"
                                    >
                                PSK-8, Baud-16 - 48 bits/s
                            </button>
                            <button
                              class="btn btn-default"
                              onClick="quickConfigure(1, 8, 32, 1)"
                              >
                                PSK-8, Baud-32 - 96 bits/s
                            </button>
                            <br/>
                        </p>

                        <p>
                            Orthogonal frequency-division multiplexing (OFDM) and multiple channel 'Quick Config'
                            buttons are still under development/testing!
                        </p>

                    </div>
                </div>
            </div>

            <h2>Initialize</h2>
            <div class="clearfix margin-bottom">

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b>
                            View Type
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <button
                            id="view-type-simple"
                            class="btn btn-default"
                            onClick="viewType('simple')"
                            >
                            Simple
                        </button>
                        <button
                            id="view-type-medium"
                            class="btn btn-default"
                            onClick="viewType('medium')"
                            >
                            Medium
                        </button>
                        <button
                            id="view-type-complex"
                            class="btn btn-default"
                            onClick="viewType('complex')"
                            >
                            Complex
                        </button>
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            Source
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <button
                          id="rx-input-mic"
                          class="btn btn-default"
                          onClick="rxInput('mic')"
                          >
                            Microphone
                        </button>
                        <button
                          id="rx-input-loopback"
                          class="btn btn-default"
                          onClick="rxInput('loopback')"
                          >
                            Loopback
                        </button>
                        <button
                          id="rx-input-rec"
                          class="btn btn-default"
                          onClick="rxInput('rec')"
                          >
                            Recorded audio
                        </button>
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="recorded-audio-url">
                            Recorded audio url
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input type="text" id="recorded-audio-url" value="http://localhost:63342/ucEmu/an.wav" />
                        <button class="btn btn-default" onClick="loadRecordedAudio()">Load</button>
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-medium view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="rx-dft-window-time">
                            DFT window time [ms]
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="rx-dft-window-time"
                            value=""
                            />
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="rx-notification-per-second">
                            Rx notifications per second
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="text"
                            id="rx-notification-per-second"
                            value=""
                            />
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="rx-spectrum-visible" class="label-compact">
                            Rx spectrum
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="checkbox"
                            checked="checked"
                            id="rx-spectrum-visible"
                            value="1"
                            />
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="rx-constellation-diagram-visible" class="label-compact">
                            Constellation diagram
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="checkbox"
                            checked="checked"
                            id="rx-constellation-diagram-visible"
                            value="1"
                            />
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="rx-enabled" class="label-compact">
                            RX enabled
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="checkbox"
                            checked="checked"
                            id="rx-enabled"
                            onChange="enabledChanged('rx')"
                            value="1"
                            />
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="rx-channel-config">
                            RX channel config
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="text"
                            id="rx-channel-config"
                            value=""
                            />
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="tx-enabled" class="label-compact">
                            TX enabled
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="checkbox"
                            checked="checked"
                            id="tx-enabled"
                            onChange="enabledChanged('tx')"
                            value="1"
                            />
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="tx-channel-config">
                            TX channel config
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="text"
                            id="tx-channel-config"
                            value=""
                            />
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        &nbsp;
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <button class="btn btn-default" onClick="collectSettingsAndInit()">Reinitialize</button>
                        <button class="btn btn-default" onClick="destroy()">Destroy</button>
                    </div>
                </div>

            </div>

            <h2>General info/settings</h2>
            <div class="clearfix margin-bottom">

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            Audio Network
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <span id="audio-network-version"></span>
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            Sample rate [Hz]
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <span id="sample-rate"></span>
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-medium view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="symbol-duration">
                            Symbol duration [ms]
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="symbol-duration"
                            value=""
                            onChange="symbolDurationChange()"
                        />
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-medium view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="guard-interval">
                            Guard interval [ms]
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="guard-interval"
                            value=""
                            onChange="guardIntervalChange()"
                        />
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-medium view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="interpacket-gap">
                            Interpacket gap [ms]
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input type="number" id="interpacket-gap" value="" />
                    </div>
                </div>


                <div class="row margin-bottom view-type view-type-medium view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="sync-preamble" class="label-compact">
                            Add SyncPreamble to each packet
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="checkbox"
                            checked="checked"
                            id="sync-preamble"
                            value="1"
                            onChange="syncPreambleChange()"
                            />
                    </div>
                </div>

            </div>

            <h2>Receiver</h2>
            <div class="clearfix margin-bottom">

                <div class="row margin-bottom view-type view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            Rx buffer size
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <span id="rx-buffer-size"></span>
                    </div>
                </div>

                <div
                    id="rx-conditional-css-class-spectrum"
                    class=""
                    class-without-spectrum="hidden"
                    class-with-spectrum="row margin-bottom"
                    >
                    <div class="col col-xs-12">
                        <div id="rx-spectrum"></div>
                    </div>
                </div>

                <div class="row margin-bottom" id="rx-channel-container">
                </div>

            </div>

            <h2>Transmitter</h2>
            <div class="clearfix margin-bottom">

                <div class="row margin-bottom view-type view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            Tx buffer size
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <span id="tx-buffer-size"></span>
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            Output [tx]
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <button
                            id="tx-output-tx-enable"
                            class="btn btn-default"
                            onClick="output('tx', true)"
                            >
                            Enable
                        </button>
                        <button
                            id="tx-output-tx-disable"
                            class="btn btn-default"
                            onClick="output('tx', false)"
                            >
                            Disable
                        </button>
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            Output [microphone]
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <button
                            id="tx-output-mic-enable"
                            class="btn btn-default"
                            onClick="output('mic', true)"
                            >
                            Enable
                        </button>
                        <button
                            id="tx-output-mic-disable"
                            class="btn btn-default"
                            onClick="output('mic', false)"
                            >
                            Disable
                        </button>
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            Output [recorded audio]
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <button
                            id="tx-output-rec-enable"
                            class="btn btn-default"
                            onClick="output('rec', true)"
                            >
                            Enable
                        </button>
                        <button
                            id="tx-output-rec-disable"
                            class="btn btn-default"
                            onClick="output('rec', false)"
                            >
                            Disable
                        </button>
                    </div>
                </div>

                <div class="row margin-bottom" id="tx-channel-container">
                </div>

            </div>

            <script>
                document.write('<div class="fb-comments" data-href="' + window.location.href + '" data-numposts="5"></div>');
            </script>

        </div>

        <footer>
            <div class="row">
                <div class="col col-xs-12">
                    <div class="copyright">Robert Rypuła 2015-2018</div>
                </div>
            </div>
        </footer>

        <div id="load-indicator">
            <div>
                <span>RX load: </span>
                <span id="load-rx"></span>
                <span>%</span>
            </div>
            <div>
                <span>TX load: </span>
                <span id="load-tx"></span>
                <span>%</span>
            </div>
        </div>

        <script src="https://cdn.rypula.pl/audio-network/v1.3.2/audio-network-v1.3.2.min.js"></script>

        <script id="template-tx-channel" type="text/html">
            <!-- channel begin -->
            <div class="col col-xs-12 tx-channel">

                <div class="row margin-bottom">
                    <div class="col col-xs-12">
                        <h3>TX Channel #[[ channelIndex ]]</h3>
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-5 col-md-3">
                        <b class="label">
                            Speed [bit/s]
                        </b>
                    </div>
                    <div class="col col-xs-7 col-md-6">
                        <span id="tx-speed-[[ channelIndex ]]"></span>
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-medium view-type-complex">
                    <div class="col col-xs-5 col-md-3">
                        <label for="tx-psk-size-[[ channelIndex ]]">
                            PSK symbol size
                        </label>
                    </div>
                    <div class="col col-xs-7 col-md-6">
                        <input
                            type="number"
                            id="tx-psk-size-[[ channelIndex ]]"
                            value=""
                            onChange="uiRefreshOnPskSizeChange('tx', [[ channelIndex ]])"
                            />
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-5 col-md-3">
                        <b class="label">
                            Send sync signal
                        </b>
                    </div>
                    <div class="col col-xs-7 col-md-6">
                        <button class="btn btn-default" onClick="transmitSynchronization([[ channelIndex ]])">
                            SYNC
                        </button>
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-5 col-md-3">
                        <label for="tx-packet-data-[[ channelIndex ]]">
                            Send packet
                        </label>
                    </div>
                    <div class="col col-xs-7 col-md-6">
                        <textarea
                            class="packet-data-textarea"
                            id="tx-packet-data-[[ channelIndex ]]"
                            ></textarea>
                        <button
                            class="btn btn-default"
                            onClick="transmitPacket([[ channelIndex ]])"
                            >
                            Send packet
                        </button>
                    </div>
                </div>

                <div class="row margin-bottom" id="tx-channel-[[ channelIndex ]]-ofdm-container">
                </div>

            </div>
            <!-- channel end -->
        </script>

        <script id="template-tx-channel-ofdm" type="text/html">
            <!-- ofdm begin -->
            <div class="col col-xs-12 col-sm-6 col-lg-4">
                <div class="tx-channel-ofdm">

                    <div class="row margin-bottom">
                        <div class="col col-xs-12">
                            <h4>TX Channel #[[ channelIndex ]] - subcarrier #[[ ofdmIndex ]]</h4>
                        </div>
                    </div>

                    <div class="row margin-bottom view-type view-type-medium view-type-complex">
                        <div class="col col-xs-5">
                            <label for="tx-frequency-input-[[ channelIndex ]]-[[ ofdmIndex ]]">
                                Frequency [Hz]
                            </label>
                        </div>
                        <div class="col col-xs-7">
                            <input type="number" id="tx-frequency-input-[[ channelIndex ]]-[[ ofdmIndex ]]" value="" />
                            <div
                                class="right-info-label"
                                id="tx-frequency-label-[[ channelIndex ]]-[[ ofdmIndex ]]"
                                ></div>
                            <button
                                class="btn btn-default"
                                onClick="frequencyUpdate('tx', [[ channelIndex ]], [[ ofdmIndex ]])"
                                >
                                Update
                            </button>
                        </div>
                    </div>

                    <div class="row margin-bottom view-type view-type-medium view-type-complex">
                        <div class="col col-xs-5">
                            <label for="tx-phase-correction-input-[[ channelIndex ]]-[[ ofdmIndex ]]">
                                Phase correction
                            </label>
                        </div>
                        <div class="col col-xs-7">
                            <input type="number" id="tx-phase-correction-input-[[ channelIndex ]]-[[ ofdmIndex ]]" value="" />
                            <div
                                class="right-info-label"
                                id="tx-phase-correction-label-[[ channelIndex ]]-[[ ofdmIndex ]]"
                                ></div>
                            <button
                                class="btn btn-default"
                                onClick="phaseCorrectionUpdate('tx', [[ channelIndex ]], [[ ofdmIndex ]])"
                                >
                                Update
                            </button>
                        </div>
                    </div>

                    <div class="row margin-bottom view-type view-type-complex">
                        <div class="col col-xs-5">
                            <label for="tx-amplitude-input-[[ channelIndex ]]-[[ ofdmIndex ]]">
                                Amplitude
                            </label>
                        </div>
                        <div class="col col-xs-7">
                            <input
                                type="number"
                                id="tx-amplitude-input-[[ channelIndex ]]-[[ ofdmIndex ]]"
                                value=""
                                />
                        </div>
                    </div>

                    <div class="row margin-bottom">
                        <div class="col col-xs-5">
                            <b class="label">
                                Send symbol
                            </b>
                        </div>
                        <div class="col col-xs-7">
                            <div class="tx-symbol" id="tx-symbol-[[ channelIndex ]]-[[ ofdmIndex ]]"></div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- ofdm end -->
        </script>

        <script id="template-rx-channel" type="text/html">
            <!-- channel begin -->
            <div class="col col-xs-12 rx-channel">

                <div class="row margin-bottom">
                    <div class="col  col-xs-12">
                        <h3>RX Channel #[[ channelIndex ]]</h3>
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-5 col-md-3">
                        <b class="label">
                            Speed [bit/sec]
                        </b>
                    </div>
                    <div class="col col-xs-7 col-md-6">
                        <span id="rx-speed-[[ channelIndex ]]"></span>
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-5 col-md-3">
                        <b class="label">
                            RX adapter - RESET
                        </b>
                    </div>
                    <div class="col col-xs-7 col-md-6">
                        <button class="btn btn-default" onClick="receiveAdapterReset([[ channelIndex ]])">
                            RESET
                        </button>
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            RX adapter - POWER
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <div id="rx-power-chart-[[ channelIndex ]]"></div>
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            RX adapter - STATE
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <span
                            style="background-color: orange; font-family: monospace; font-size: 12px; line-height: 1em; padding: 10px; display: block;"
                            id="rx-sampling-state-v2-[[ channelIndex ]]"
                            ></span>
                        <span id="rx-sampling-state-[[ channelIndex ]]"></span>
                    </div>
                </div>

                <div class="row margin-bottom">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <b class="label">
                            RX adapter - PACKETS
                        </b>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <textarea
                            id="rx-sampling-packet-history-[[ channelIndex ]]"
                            readonly="readonly"
                            ></textarea>
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-medium view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="rx-psk-size-[[ channelIndex ]]">
                            PSK symbol size
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input
                            type="number"
                            id="rx-psk-size-[[ channelIndex ]]"
                            onChange="pskSizeChange([[ channelIndex ]])"
                            value=""
                            />
                    </div>
                </div>

                <div class="row margin-bottom view-type view-type-complex">
                    <div class="col col-xs-6 col-sm-5 col-md-3">
                        <label for="rx-power-threshold-[[ channelIndex ]]">
                            Power threshold [dB]
                        </label>
                    </div>
                    <div class="col col-xs-6 col-sm-7 col-md-6">
                        <input type="number" id="rx-power-threshold-[[ channelIndex ]]" value="-20" />
                    </div>
                </div>

                <div class="row margin-bottom" id="rx-channel-[[ channelIndex ]]-ofdm-container">
                </div>

            </div>
            <!-- channel end -->
        </script>

        <script id="template-rx-channel-ofdm" type="text/html">
            <!-- ofdm begin -->
            <div
                id="rx-conditional-css-class-cont-[[ channelIndex ]]-[[ ofdmIndex ]]"
                class=""
                class-without-constellation-diagram="col col-xs-12 col-sm-6 col-lg-4"
                class-with-constellation-diagram="col col-xs-12 col-md-6"
                >
                <div class="rx-channel-ofdm">

                    <div class="row margin-bottom">
                        <div class="col col-xs-12">
                            <h4>RX Channel #[[ channelIndex ]] - subcarrier #[[ ofdmIndex ]]</h4>
                        </div>
                    </div>

                    <div class="row margin-bottom">

                        <div
                            id="rx-conditional-css-class-cd-[[ channelIndex ]]-[[ ofdmIndex ]]"
                            class=""
                            class-without-constellation-diagram="hidden"
                            class-with-constellation-diagram="col col-xs-12 col-sm-4 col-md-12 col-lg-4"
                            >
                            <div
                                class="rx-constellation-diagram margin-bottom"
                                id="rx-constellation-diagram-[[ channelIndex ]]-[[ ofdmIndex ]]"
                                >
                            </div>
                        </div>

                        <div
                            id="rx-conditional-css-class-widget-[[ channelIndex ]]-[[ ofdmIndex ]]"
                            class=""
                            class-without-constellation-diagram="col col-xs-12"
                            class-with-constellation-diagram="col col-xs-12 col-sm-8 col-md-12 col-lg-8"
                            >

                            <div class="row margin-bottom">
                                <div class="col col-xs-6">
                                    <b class="label">
                                        Symbol received
                                    </b>
                                </div>
                                <div class="col col-xs-6">
                                    <div class="rx-symbol" id="rx-symbol-[[ channelIndex ]]-[[ ofdmIndex ]]"></div>
                                </div>
                            </div>

                            <div class="row margin-bottom view-type view-type-medium view-type-complex">
                                <div class="col col-xs-6">
                                    <b class="label">
                                        Phase [deg, unit]
                                    </b>
                                </div>
                                <div class="col col-xs-6">
                                    <span id="rx-phase-[[ channelIndex ]]-[[ ofdmIndex ]]"></span>
                                </div>
                            </div>

                            <div class="row margin-bottom">
                                <div class="col col-xs-6">
                                    <b class="label">
                                        Power [dB]
                                    </b>
                                </div>
                                <div class="col col-xs-6">
                                    <span id="rx-power-[[ channelIndex ]]-[[ ofdmIndex ]]"></span>
                                </div>
                            </div>

                            <div class="row margin-bottom view-type view-type-medium view-type-complex">
                                <div class="col col-xs-6">
                                    <label for="rx-frequency-input-[[ channelIndex ]]-[[ ofdmIndex ]]">
                                        Frequency [Hz]
                                    </label>
                                </div>
                                <div class="col col-xs-6">
                                    <input type="number" id="rx-frequency-input-[[ channelIndex ]]-[[ ofdmIndex ]]" value="" />
                                    <div
                                        class="right-info-label"
                                        id="rx-frequency-label-[[ channelIndex ]]-[[ ofdmIndex ]]"
                                        ></div>
                                    <button
                                        class="btn btn-default"
                                        onClick="frequencyUpdate('rx', [[ channelIndex ]], [[ ofdmIndex ]])"
                                        >
                                        Update
                                    </button>
                                </div>
                            </div>

                            <div class="row margin-bottom view-type view-type-medium view-type-complex">
                                <div class="col col-xs-6">
                                    <label for="rx-phase-correction-input-[[ channelIndex ]]-[[ ofdmIndex ]]">
                                        Phase correction
                                    </label>
                                </div>
                                <div class="col col-xs-6">
                                    <input type="number" id="rx-phase-correction-input-[[ channelIndex ]]-[[ ofdmIndex ]]" value="" />
                                    <div
                                        class="right-info-label"
                                        id="rx-phase-correction-label-[[ channelIndex ]]-[[ ofdmIndex ]]"
                                        ></div>
                                    <button
                                        class="btn btn-default"
                                        onClick="phaseCorrectionUpdate('rx', [[ channelIndex ]], [[ ofdmIndex ]])"
                                        >
                                        Update
                                    </button>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
            </div>
            <!-- ofdm end -->
        </script>

        <script src="physical-layer-full-template-util.js"></script>
        <script src="physical-layer-full-receive.js"></script>
        <script src="physical-layer-full-transmit.js"></script>
        <script src="physical-layer-full.js"></script>

    </div>

    <script>
        if (isProduction()) { // TODO refactor this
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-76662342-1', 'auto');
            ga('send', 'pageview');
        }
    </script>
</body>
</html>
